<template>
  <div class="client_detail_page">
    <div class="mod">
      <el-tabs v-model="activeName">
        <el-tab-pane name="companyMessage" label="企业信息">
          <div class="content">
            <div class="img_list">
              <div class="img_item">
                <div class="img_box">
                  <img :src="baseURL + detailObj.businessPic" alt="" class="img" />
                  <div class="mask">
                    <i class="el-icon-search" @click.stop="previewBigImg(detailObj.businessPic)"></i>
                  </div>
                </div>
                <div class="name">企业营业执照</div>
              </div>
            </div>
            <div class="msg_box">
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">企业名称：</div>
                    <div class="value">{{ detailObj.enterpriseName }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">统一社会信用代码：</div>
                    <div class="value">{{ detailObj.creditCode }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">法定代表人：</div>
                    <div class="value">{{ detailObj.legal }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">注册资本：</div>
                    <div class="value">1{{ detailObj.registered }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">注册地址：</div>
                    <div class="value">{{ detailObj.address }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">成立日期：</div>
                    <div class="value">{{ detailObj.establishedDate }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">有限期限：</div>
                    <div class="value">
                      {{ detailObj.limited === '1' ? '' : detailObj.limited }}
                      <el-checkbox
                        v-if="detailObj.limited === '1'"
                        :disabled="true"
                        :value="true"
                        class="long_effect"
                      >长期有效</el-checkbox>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">公司类型：</div>
                    <div class="value">{{ detailObj.enType }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">公司性质：</div>
                    <div class="value">{{ detailObj.property }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">行业分类：</div>
                    <div class="value">{{ detailObj.industry }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">公司电话：</div>
                    <div class="value">{{ detailObj.companyPhone }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">办公地址：</div>
                    <div class="value">{{ detailObj.officeAddress }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="24">
                  <div class="msg_line last">
                    <div class="key">企业经营范围：</div>
                    <div class="value">{{ detailObj.bfanwei }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="legal" label="法人信息">
          <div class="content">
            <div class="img_list">
              <div class="img_item">
                <div class="img_box">
                  <img :src="baseURL + detailObj.frContactRPic" alt="" class="img" />
                  <div class="mask">
                    <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactRPic)"></i>
                  </div>
                </div>
                <div class="name">身份证人像面</div>
              </div>
              <div class="img_item">
                <div class="img_box">
                  <img :src="baseURL + detailObj.frContactBPic" alt="" class="img" />
                  <div class="mask">
                    <i class="el-icon-search" @click.stop="previewBigImg(detailObj.frContactBPic)"></i>
                  </div>
                </div>
                <div class="name">身份证国徽面</div>
              </div>
            </div>
            <div class="msg_box">
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">法人姓名：</div>
                    <div class="value">{{ detailObj.frContactName }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件类型：</div>
                    <div class="value">{{ detailObj.frContactType }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">身份证号：</div>
                    <div class="value">{{ detailObj.frContactId }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">性别：</div>
                    <div class="value">{{ detailObj.frContactSex }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">民族：</div>
                    <div class="value">{{ detailObj.frContactEthnic }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">签发机关：</div>
                    <div class="value">{{ detailObj.frContactIssuing }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">出生日期：</div>
                    <div class="value">{{ detailObj.frContactBirth }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件起始日期：</div>
                    <div class="value">{{ detailObj.frContactCardStart }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件到期日期：</div>
                    <div class="value">
                      {{ detailObj.frContactCardEnd === '1' ? '' : detailObj.frContactCardEnd }}
                      <el-checkbox
                        v-if="detailObj.frContactCardEnd === '1'"
                        :disabled="true"
                        :value="true"
                        class="long_effect"
                      >长期有效</el-checkbox>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">户籍地址：</div>
                    <div class="value">{{ detailObj.frContactAddress }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">手机号码：</div>
                    <div class="value">{{ detailObj.frContactPhone }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">法人邮箱：</div>
                    <div class="value">{{ detailObj.frContactEmail }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="bank" label="银行账户">
          <div class="content">
            <div class="msg_box">
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">开户名称：</div>
                    <div class="value">{{ detailObj.enterpriseBank.accountName }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">银行账号：</div>
                    <div class="value">{{ detailObj.enterpriseBank.bankNumber }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">开户银行：</div>
                    <div class="value">{{ detailObj.enterpriseBank.bankDepositDesc }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">开户行所在地：</div>
                    <div class="value">{{ detailObj.enterpriseBank.bankProvinces }}/{{ detailObj.enterpriseBank.bankCities }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">开户支行：</div>
                    <div class="value">{{ detailObj.enterpriseBank.bankBranch }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">大额行号（联行号）：</div>
                    <div class="value">{{ detailObj.enterpriseBank.bankCode }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="companyContact" label="企业联系人">
          <div class="content">
            <div class="img_list">
              <div class="img_item">
                <div class="img_box">
                  <img :src="baseURL + detailObj.adminOperation.contactRPic" alt="" class="img" />
                  <div class="mask">
                    <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactRPic)"></i>
                  </div>
                </div>
                <div class="name">身份证人像面</div>
              </div>
              <div class="img_item">
                <div class="img_box">
                  <img :src="baseURL + detailObj.adminOperation.contactBPic" alt="" class="img" />
                  <div class="mask">
                    <i class="el-icon-search" @click.stop="previewBigImg(detailObj.adminOperation.contactBPic)"></i>
                  </div>
                </div>
                <div class="name">身份证国徽面</div>
              </div>
            </div>
            <div class="msg_box">
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">姓名：</div>
                    <div class="value">{{ detailObj.adminOperation.contactName }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件类型：</div>
                    <div class="value">{{ detailObj.adminOperation.contactType }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">身份证号：</div>
                    <div class="value">{{ detailObj.adminOperation.contactId }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">性别：</div>
                    <div class="value">{{ detailObj.adminOperation.contactSex }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">民族：</div>
                    <div class="value">{{ detailObj.adminOperation.contactEthnic }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">签发机关：</div>
                    <div class="value">{{ detailObj.adminOperation.contactIssuing }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">出生日期：</div>
                    <div class="value">{{ detailObj.adminOperation.contactBirth }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件起始日期：</div>
                    <div class="value">{{ detailObj.adminOperation.contactCardStart }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">证件到期日期：</div>
                    <div class="value">
                      {{ detailObj.adminOperation.contactCardEnd === '1' ? '' : detailObj.adminOperation.contactCardEnd }}
                      <el-checkbox
                        v-if="detailObj.adminOperation.contactCardEnd === '1'"
                        :disabled="true"
                        :value="true"
                        class="long_effect"
                      >长期有效</el-checkbox>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">户籍地址：</div>
                    <div class="value">{{ detailObj.adminOperation.contactAddress }}</div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row">
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">手机号码：</div>
                    <div class="value">{{ detailObj.adminOperation.contactPhone }}</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="msg_line">
                    <div class="key">邮箱：</div>
                    <div class="value">{{ detailObj.adminOperation.contactEmail }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="agreement" label="协议附件">
          <div class="content">
            <div class="img_list">
              <div class="img_item" v-if="detailObj.businessPic">
                <div class="sign_box">
                  <img src="@/assets/crm/pdf.png" alt="" class="img" />
                  <div class="mask">
                    <a class="el-icon-search" :href="baseURL + detailObj.signaturePic" download="电子签名认证授权委托书.pdf" alt=""></a>
                  </div>
                </div>
                <div class="name">电子签名认证授权委托书</div>
              </div>
              <div class="img_item" v-if="detailObj.adContactCorporate">
                <div class="sign_box">
                  <img src="@/assets/crm/pdf.png" alt="" class="img" />
                  <div class="mask">
                    <a class="el-icon-search" :href="baseURL +  detailObj.adContactCorporate" download="法人授权委托书" alt=""></a>
                  </div>
                </div>
                <div class="name">法人授权委托书</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <CustomDialog
      class="preview_img_mask"
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import { clientDetail } from '@/api/crm'
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    CustomDialog,
  },
  data() {
    return {
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      dialogVisible: false,
      previewBigImgUrl: '',
      enterpriseId: '',
      detailObj: {
        enterpriseBank: {},
        adminOperation: {},
      },
      activeName: 'companyMessage',
    }
  },
  mounted() {
    if (this.$route.query.enterpriseId) {
      this.enterpriseId = this.$route.query.enterpriseId
      this.getClientDetail()
    }
  },
  methods: {
    getClientDetail() {
      clientDetail(this.enterpriseId).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.detailObj = res.data
        }
      })
    },
    previewBigImg(url) {
      this.previewBigImgUrl = url
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.previewBigImgUrl = ''
    },
  }
}
</script>

<style lang="scss" scoped>
.client_detail_page {
  .mod {
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(1, 24, 70, 0.09);
    border-radius: 6px;
    padding: 20px 16px 24px;
    .content {
      padding: 40px;
      .img_list {
        display: flex;
        padding-left: 80px;
        .img_item {
          .img_box {
            width: 340px;
            height: 214px;
          }
          .sign_box {
            width: 165px;
            height: 165px;
          }
          .img_box, .sign_box{
            position: relative;
            margin-right: 30px;
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30px;
                font-weight: 600;
              }
            }
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .sign {
        margin-bottom: 38px;
        padding-left: 80px;
        display: flex;
        .img_box {
          .img {
            display: block;
            width: 165px;
            height: 165px;
            background-color: red;
          }
          .name {
            margin-top: 20px;
            color: #333;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
          }
        }
      }
      .msg_box {
        margin-top: 40px;
        .row {
          margin-bottom: 38px;
          &:last-child {
            margin-bottom: 0;
          }
          .msg_line {
            display: flex;
            align-items: center;
            &.last {
              align-items: baseline;
              .value {
                line-height: 22px;
                height: auto;
              }
            }
            .key {
              width: 206px;
              height: 14px;
              line-height: 14px;
              color: #777;
              font-size: 14px;
              text-align: right;
              flex-shrink: 0;
            }
            .value {
              flex: 1 1 auto;
              color: #333;
              font-size: 14px;
              height: 14px;
              line-height: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
